<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<!--引入公用样式-->
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
	</head>

	<body>
		<!--轮播图插件-->
		<div id="slider" class="mui-slider">
			<div class="mui-slider-group mui-slider-loop">
				
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		<!--服务-->
		<div class="home-listbox bs-bb bgc-ff">
			<div class="serviceTitle">
				<span class="listFontSize">服&nbsp;&nbsp;&nbsp;&nbsp;务</span>
			</div>
			<!--第一排-->
			<div class="mui-row row-imgbox fatherbox">
				<div class="mui-col-xs-3 publicjumppage" data-id="home-identificationCard">
					<div class="ta-c imgbox">
						<img src="../images/sfz.png" alt="" />
					</div>
					<div class="smFontSize ta-c">身份归属</div>
				</div>
				<div class="mui-col-xs-3 publicjumppage" data-id="home-bank">
					<div class="ta-c imgbox">
						<img src="../images/yhk.png" alt="" />
					</div>
					<div class="smFontSize ta-c">银行查询</div>
				</div>
				<div class="mui-col-xs-3 publicjumppage" data-id="home-belongingTo">
					<div class="ta-c imgbox">
						<img src="../images/gsd.png" alt="" />
					</div>
					<div class="smFontSize ta-c">手机归属地</div>
				</div>
				<div class="mui-col-xs-3 publicjumppage" data-id="home-exchangeRate">
					<div class="ta-c imgbox">
						<img src="../images/hlzh.png" alt="" />
					</div>
					<div class="smFontSize ta-c">银行汇率</div>
				</div>
			</div>
			<!--第二排-->
			<div class="mui-row row-imgbox fatherbox">
				<div class="mui-col-xs-3 publicjumppage" data-id="home-translation">
					<div class="ta-c imgbox">
						<img src="../images/fy.png" alt="" />
					</div>
					<div class="smFontSize ta-c">翻译</div>
				</div>
				<div class="mui-col-xs-3 publicjumppage" data-id="home-equipment">
					<div class="ta-c imgbox">
						<img src="../images/sb.png" alt="" />
					</div>
					<div class="smFontSize ta-c">设备信息</div>
				</div>
				<div class="mui-col-xs-3 publicjumppage" data-id="home-figure">
					<div class="ta-c imgbox">
						<img src="../images/sc.png" alt="" />
					</div>
					<div class="smFontSize ta-c">身材计算</div>
				</div>
				<div class="mui-col-xs-3 publicjumppage" data-id="home-ip">
					<div class="ta-c imgbox">
						<img src="../images/ip.png" alt="" />
					</div>
					<div class="smFontSize ta-c">IP查询</div>
				</div>
			</div>

		</div>
		<!--待开发想-->
		<div class="home-listbox bs-bb bgc-ff">
			<div class="serviceTitle">
				<span class="listFontSize">开发中...</span>
			</div>
			<!--第一排-->
			<div class="mui-row row-imgbox nofatherbox">
				<div class="mui-col-xs-3 publicjumppage">
					<div class="ta-c imgbox">
						<img src="../images/gjj.png" alt="" />
					</div>
					<div class="smFontSize ta-c">公积金计算</div>
				</div>
				<div class="mui-col-xs-3 publicjumppage">
					<div class="ta-c imgbox">
						<img src="../images/kd.png" alt="" />
					</div>
					<div class="smFontSize ta-c">全国快递</div>
				</div>
				<div class="mui-col-xs-3 publicjumppage">
					<div class="ta-c imgbox">
						<img src="../images/gj.png" alt="" />
					</div>
					<div class="smFontSize ta-c">公交地铁</div>
				</div>
				<div class="mui-col-xs-3 publicjumppage">
					<div class="ta-c imgbox">
						<img src="../images/sl.png" alt="" />
					</div>
					<div class="smFontSize ta-c"></div>
				</div>
			</div>

		</div>
		<script src="../js/mui.min.js"></script>
		<!--引入页面跳转公用方法-->
		<script src="../js/public.js"></script>
		<script src="../js/zepto.js"></script>
		<script type="text/javascript">
			mui.init();
			
			// 异步ajax请求数据，获取广告图的信息
			// mui.ajax()
			let adList = [
				{
					id:5285973,
					url:'../images/EmptyBanner.jpg'
				},
				{
					id:5286268,
					url:'../images/EmptyBanner1.jpg'
				},
				{
					id:5286200,
					url:'../images/EmptyBanner2.jpg'
				},
				{
					id:5286116,
					url:'../images/EmptyBanner3.jpg'
				},
			];
			
			let first = {}
			let last = {}
			for(let key in adList){
				// 第一张
				if(key==0){
					first = adList[key]
				}
				// 最后一张
				if(key==adList.length-1){
					last = adList[key]
				}
			}
			let imgs = `
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="javascript:;" class="showDetail" data-id="${last.id}">
					<img src="${last.url}">
				</a>
			</div>
			`;
			for(let key2 in adList){
				let id = adList[key2].id;
				let url = adList[key2].url;
				
				imgs += `
				<div class="mui-slider-item">
					<a href="javascript:;" class="showDetail" data-id="${id}">
						<img src="${url}">
					</a>
				</div>
				`;
			}
			imgs += `
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="javascript:;" class="showDetail" data-id="${first.id}">
					<img src="${first.url}">
				</a>
			</div>
			`;
			document.querySelector('.mui-slider-group').innerHTML = imgs;
			
			
			//获得slider插件对象
			var gallery = mui('.mui-slider');
			gallery.slider({
				interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
			});
			
			//预加载页面
			mui.plusReady(function() {
				mui.preload({	// 该文件没有用到的
					url: "one.html",
					id: "one"
				});
				mui.preload({
					url: "home-bank.html",
					id: "home-bank"
				});
				mui.preload({
					url: "home-bank.html",
					id: "home-bank"
				});
				mui.preload({
					url: "home-belongingTo.html",
					id: "home-belongingTo"
				});
				mui.preload({
					url: "home-equipment.html",
					id: "home-equipment"
				});
				mui.preload({
					url: "home-exchangeRate.html",
					id: "home-exchangeRate"
				});
				mui.preload({
					url: "home-expressDelivery.html",
					id: "home-expressDelivery"
				});
				mui.preload({
					url: "home-figure.html",
					id: "home-figure"
				});
				mui.preload({
					url: "home-identificationCard.html",
					id: "home-identificationCard"
				});
				mui.preload({
					url: "home-publicTransport.html",
					id: "home-publicTransport"
				});
				mui.preload({
					url: "home-translation.html",
					id: "home-translation"
				});
				mui.preload({
					url: "home-ip.html",
					id: "home-ip"
				});
				// 详情页预加载，先不用写参数
				// mui.preload({
				// 	url: "detail.html",
				// 	id: "detail"
				// });
				
				
				// 给广告图添加点击事件
				mui(document).on('tap','.showDetail',function(){
					// 打开详情页窗口页面，传ID的值
					var id = this.getAttribute('data-id');
					// 这个预加载不可以，结果id不会变，detail.html文件只加载一次
					// mui.preload({
					// 	url: "detail.html",
					// 	id: "detail",
					// 	extras: { aid: id } //自定义扩展参数
					// });
					// setTimeout(function(){
					// 	plus.webview.show('detail','slide-in-right',150)
					// },150);
					
					
					// 这个也可以，不过地址 detail.html?aid=1，需要在detail.html去获取aid
					// let detail = plus.webview.create('detail.html?aid='+id,'detail');
					// detail.show('detail','slide-in-right',150)
					
					
					/**  这种还可以，这种会有白屏
					mui.openWindow({
						url: 'detail.html',
						id: 'detail',
						extras:{
						  aid: id //自定义扩展参数，可以用来处理页面间传值
						},
						show:{
						  autoShow:true,//页面loaded事件发生后自动显示，默认为true
						  aniShow:'slide-in-right',//页面显示动画，默认为”slide-in-right“；
						  duration:150//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
						},
						waiting:{
						  autoShow:true,//自动显示等待框，默认为true
						  title:'正在加载...',//等待对话框上显示的提示内容
						}
					})
					**/
					
					// 这种最好，切换效果，传参，不会白屏
					let detail = plus.webview.getWebviewById('detail');
					//触发详情页面的newsId事件
					mui.fire(detail,'newsId',{
					    aid:id
					});
					plus.webview.show(detail,'slide-in-right',150)
				});
				
			})
		</script>
	</body>

</html>